
// 获取dom元素
let dom = {
    audio: document.querySelector('audio'),
    ul: document.querySelector('.container ul'),
    container: document.querySelector('.container')
}

/**
 * 格式化歌词
 * {time:时间，words:歌词内容}
 * 
 */
function parseLrc() {
    var lines = lrc.split('\n').map((item, index) => ({
        time: +item.split(']')[0].substring(1).split(':')[0] * 60 + +item.split(']')[0].substring(1).split(':')[1],
        word: item.split(']')[1]
    }))
    return lines;
}

let lorData = parseLrc()

// 查找下标
let findIndex = () => {
    let curTime = dom.audio.currentTime
    for (let i = 0; i < lorData.length; i++) {
        if (lorData[i].time > curTime) {
            return i - 1
        }
    }
    // 没找到，返回最后一句
    return lorData.length - 1
}

// 创建歌词

function createWorlds() {
    // 文档片段
    let frag = document.createDocumentFragment()

    for (let i = 0; i < lorData.length; i++) {
        let li = document.createElement('li')
        li.textContent = lorData[i].word
        frag.appendChild(li)
    }
    dom.ul.appendChild(frag)
}
createWorlds()


// 容器高度
let containerHeight = dom.container.clientHeight
// li 高度
let liHeight = dom.ul.children[0].clientHeight

// 偏移
function setOff() {
    let index = findIndex()
    let offset = liHeight * index + liHeight / 2 - containerHeight / 2
    if (offset < 0) {
        offset = 0
    }

    dom.ul.style.transform = `translateY(-${offset}px)`

    let li = dom.ul.querySelector('.active')
    if (li) {

        li.classList.remove('active')
    }
    li = dom.ul.children[index]
    if (li) {
        li.classList.add('active')
    }
}


dom.audio.addEventListener('timeupdate', setOff)